<html>

<head>
    <meta charset="UTF-8">
    <title>CSS 与 Style 绑定</title>
    <script src="vue/vue.js"></script>
</head>

<body>
    <div id="app">
        <div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>
        <div v-bind:class="classObject"></div>
        <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">
            道冲而用之或不盈，渊兮似万物之宗。挫其锐，解其纷，和其光，同其尘。湛兮似或存，吾不知谁之子，象帝之先。</div>
        <div v-bind:style="styleObject">道冲而用之或不盈，渊兮似万物之宗。挫其锐，解其纷，和其光，同其尘。湛兮似或存，吾不知谁之子，象帝之先。</div>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                activeColor: 'red',
                fontSize: 16,
                isActive: true,
                hasError: false,
                classObject: {
                    active: true,
                    'text-danger': false
                },
                styleObject: {
                    color: 'blue',
                    fontSize: '13px'
                }
            }
        })
    </script>
</body>

</html>
